<template>
  <a-modal
    :title="form.id ? '修改' : '新增'"
    width="800px"
    v-model="visible"
    @ok="submit"
    :afterClose="closeModal"
    :destroyOnClose="true"
    :confirmLoading="btnLoading"
  >
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
      <a-form-model-item label="等级名称" prop="name">
        <a-input class="inp" v-model="form.name" placeholder="请输入等级名称" />
      </a-form-model-item>
      <a-form-model-item label="等级" prop="level">
        <a-select v-model="form.level" allowClear>
          <a-select-option v-for="item of levelList" :key="item" :value="item"> {{ item }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="是否自动升级" prop="is_auto_upgrade">
        <a-radio-group v-model="form.is_auto_upgrade">
          <a-radio :value="0">否</a-radio>
          <a-radio :value="1">是</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <template v-if="form.is_auto_upgrade">
        <a-form-model-item label="升级条件" prop="type">
          <a-radio-group v-model="form.type">
            <a-radio :value="0">下级人数</a-radio>
            <a-radio :value="1">累计佣金</a-radio>
            <a-radio :value="2">已提现佣金</a-radio>
            <a-radio :value="3">累计消费金额</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item :label="getLabel" prop="value">
          <a-input-number v-if="!form.type" v-model="form.value" :min="0" :precision="0"> </a-input-number>
          <a-input-number v-else v-model="form.value" :min="0" :precision="2"> </a-input-number>
          {{ !form.type ? '人' : '元' }}
        </a-form-model-item>
      </template>
      <a-form-model-item label="分销佣金类型" prop="profit_type">
        <a-radio-group v-model="form.profit_type">
          <a-radio :value="0">百分比</a-radio>
          <a-radio :value="1">固定金额</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="一级佣金" prop="first_profit">
        <a-input-number v-if="form.profit_type" v-model="form.first_profit" :min="0" :precision="2"> </a-input-number>
        <a-input-number v-else :max="100" v-model="form.first_profit" :min="0" :precision="2"> </a-input-number>
      </a-form-model-item>
      <a-form-model-item label="二级佣金" prop="second_profit">
        <a-input-number v-if="form.profit_type" v-model="form.second_profit" :min="0" :precision="2"> </a-input-number>
        <a-input-number v-else :max="100" v-model="form.second_profit" :min="0" :precision="2"> </a-input-number>
      </a-form-model-item>
      <a-form-model-item label="三级佣金" prop="third_profit">
        <a-input-number v-if="form.profit_type" v-model="form.third_profit" :min="0" :precision="2"> </a-input-number>
        <a-input-number v-else :max="100" v-model="form.third_profit" :min="0" :precision="2"> </a-input-number>
      </a-form-model-item>
      <a-form-model-item label="是否禁用" prop="status">
        <a-radio-group v-model="form.status">
          <a-radio :value="0">禁用</a-radio>
          <a-radio :value="1">开启</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="等级说明" prop="desc">
        <a-textarea placeholder="请填写等级说明" allow-clear v-model="form.desc" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { shareLevelSave } from '@/api/share'

export default {
  props: {
    params: {
      type: Object,
      default() {
        return {}
      },
    },

    levelList: {
      type: Array,
      default() {
        return []
      },
    },
  },

  data() {
    return {
      visible: false,
      btnLoading: false,
      form: {
        name: '',
        level: '',
        is_auto_upgrade: 0,
        type: 0,
        value: '',
        profit_type: 0,
        first_profit: '',
        second_profit: '',
        third_profit: '',
        status: 1,
        desc: '',
      },
      rules: {
        name: [{ required: true, message: '请填写等级名称', trigger: 'blur' }],
        level: [{ required: true, message: '请选择等级', trigger: 'change' }],
        is_auto_upgrade: [{ required: true, message: '请选择', trigger: 'change' }],
        type: [{ required: true, message: '请选择', trigger: 'change' }],
        value: [{ required: true, message: '请填写', trigger: 'blur' }],
        profit_type: [{ required: true, message: '请选择', trigger: 'change' }],
        status: [{ required: true, message: '请选择', trigger: 'change' }],
        desc: [{ required: true, message: '请填写', trigger: 'blur' }],
      },
    }
  },

  computed: {
    getLabel() {
      let str = ''
      switch (this.form.type) {
        case 0:
          str = '下级人数'
          break

        case 1:
          str = '累计佣金'
          break

        case 2:
          str = '已提现佣金'
          break

        case 3:
          str = '累计消费金额'
          break
      }
      return str
    },
  },

  methods: {
    open(form) {
      if (form) {
        this.form = form
      }

      this.visible = true
    },

    submit() {
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          let form = JSON.parse(JSON.stringify(this.form))

          this.btnLoading = true
          let res = await shareLevelSave(form)
          if (res.code == 0) {
            this.$message.success('操作成功')
            this.visible = false
            this.$emit('callback')
          } else {
            this.$message.error(res.msg)
          }
          this.btnLoading = false
        } else {
          return false
        }
      })
    },

    closeModal() {
      this.$refs['ruleForm'].resetFields()
    },

    handle(type, item) {
      switch (type) {
        case 'open':
          this.$refs[item].visible = true
          break
      }
    },

    select(el, e) {
      switch (el) {
        case 'front_agent_admin_id':
          this.form.front_agent_admin_id = e.id
          this.front_agent_admin_name = e.name
          break

        case 'supplier_id':
          this.form.supplier_id = e.supplier_info.id
          this.supplier_name = e.supplier_name
          break
      }
    },
  },
}
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  .inp {
    flex: 1;
    overflow: hidden;
    margin-left: 16px;
  }
}
</style>
